<template>
  <div class="add">
    <div class="add-title">
      <div class="address">添加收货地址</div>
      <div class="save" @click="saveAddress">保存</div>
    </div>
    <div class="add-contant">
      <!-- 姓名 -->
      <div class="name">
        <div class="img">
          <img src="http://sucai.suoluomei.cn/sucai_zs/images/name.png?x-oss-process=image/quality,Q_70" alt="">
        </div>
        <div class="names">姓名:</div>
        <div class="input">
          <input type="text" placeholder="请输入姓名" ref="inputName" v-model="name">
        </div>
      </div>
      <!-- 手机 -->
      <div class="name">
        <div class="img">
          <img src="http://sucai.suoluomei.cn/sucai_zs/images/phone.png?x-oss-process=image/quality,Q_70" alt="">
        </div>
        <div class="names">手机号:</div>
        <div class="input">
          <input
            type="tel"
            maxlength="11"
            onkeyup="this.value=this.value.replace(/\D/g,'')"
            placeholder="请输入手机号"
            ref="inputPhone"
            v-model="mobile"
          >
        </div>
      </div>
      <!-- 地址 -->
      <div class="address">
        <div class="select" @click="selectAddress">
          所在地区:
          <span v-if="selectCity">请选择地区</span>
          <span v-else>{{sheng}} {{shi}} {{qu}} {{jiedao}}</span>
        </div>
        <div class="address-contant">
          <div class="contant">详细地址:</div>
          <div class="contant-input">
            <input type="text" placeholder="请输入具体地址" ref="allAddress" v-model="AllAddress">
          </div>
        </div>
      </div>
    </div>
    <!-- 地区选择弹窗 -->
    <div class="modul" v-if="model">
      <div class="addressModel" @click="falseModul"></div>
      <div class="contant">
        <div class="title">
          <div class="item" @click="selectsheng">{{sheng}}</div>
          <div class="item" @click="selectshi">{{shi}}</div>
          <div class="item" @click="selectqu">{{qu}}</div>
          <div class="item" @click="selectjiedao">{{jiedao}}</div>
        </div>
        <!-- 选择省 -->
        <div class="selectList" v-if="city==1">
          <div
            class="list"
            v-for="sheng in shengs"
            :key="sheng.index"
            @click="shengvalue(sheng.id)"
            :data-id="sheng.id"
          >{{sheng.name}}</div>
        </div>
        <!-- 选择市 -->
        <div class="selectList" v-if="city==2">
          <div
            class="list"
            v-for="shi in shis"
            :key="shi.index"
            @click="shivalue(shi.id)"
            :data-id="shi.id"
          >{{shi.name}}</div>
        </div>
        <!-- 选择区 -->
        <div class="selectList" v-if="city==3">
          <div
            class="list"
            v-for="qu in qus"
            :key="qu.index"
            @click="quvalue(qu.id)"
            :data-id="qu.id"
          >{{qu.name}}</div>
        </div>
        <!-- 选择街道 -->
        <div class="selectList" v-if="city==4">
          <div
            class="list"
            v-for="jiedao in jiedaos"
            :key="jiedao[1]"
            @click="jiedaovalue"
          >{{jiedao[0]}}</div>
        </div>
        <div class="modul-btn">
          <div class="btn-left" @click="falseModul">取消</div>
          <div class="btn-right" @click="falseModul">确定</div>
        </div>
      </div>
    </div>
    <mu-dialog title="提示" width="360" :open.sync="openSimple">
      {{contant}}
      <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
    </mu-dialog>
  </div>
</template>
<script>
import bottomBar from "../components/bottomBar.vue";
import http from "../utils/http";
export default {
  name: "address",
  data() {
    return {
      model: false,
      sheng: "请选择",
      shengId: "",
      shi: "",
      shiId: "",
      qu: "",
      quId: "",
      jiedao: "",
      jiedaoId: "",
      city: 1,
      selectCity: true,
      shengs: ["省"],
      shis: ["市"],
      qus: ["区"],
      jiedaos: ["街道"],
      name: "",
      mobile: "",
      AllAddress: "",
      openSimple: false,
      contant: ""
    };
  },
  created() {
    // 默认调取省的接口
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    let that = this;
    http
      .post("Zmhf/index", {
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "getRegionList",
        data: {
          region_id: 0,
          region_type: "prov"
        }
      })
      .then(function(response) {
        // console.log("response", response);
        if (response.errcode == 0) {
          that.shengs = response.data;
        } else {
        }
      })
      .catch(function(error) {
        // console.log("error", error);
      });
  },
  methods: {
    // 保存
    saveAddress: function() {
      // 获取名字
      var name = this.$refs.inputName.value || "";
      // 获取手机号
      var phone = this.$refs.inputPhone.value || "";
      // 获取详细地址
      var AllAddress = this.$refs.allAddress.value || "";
      var alladdress = this.sheng+' '+this.shi+' '+this.qu+' '+this.jiedao
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      if (name == "") {
        that.openSimple = true;
        that.contant = "请输入姓名";
      } else if (phone == "") {
        that.openSimple = true;
        that.contant = "请输入联系电话";
      } else if (
        that.sheng == "" ||
        that.shi == "" ||
        that.qu == ""
      ) {
        that.openSimple = true;
        that.contant = "请选择所在地区";
      } else if (AllAddress == "") {
        that.openSimple = true;
        that.contant = "请填写详细地址";
      } else {
        http
          .post("Zmhf/index", {
            key: "be15d4ca913c91494cb4f9cd6ce317c6",
            sign: res,
            type: "addAddress",
            data: {
              prov: that.shengId, //省
              city: that.shiId, //市
              area: that.quId, //地区
              town: that.jiedaoId, //街道
              detail: AllAddress, //详细
              address: alladdress, //省市地区街道全
              contact: name, //姓名
              mobile: phone //手机号码
            }
          })
          .then(function(response) {
            // console.log("response", response);
            if (response.errcode == 0) {
              that.$router.push({ path: "/address" });
            } else {
              (that.openSimple = true), (that.contant = response.msg);
            }
          })
          .catch(function(error) {
            // console.log("error", error);
          });
      }
    },
    selectsheng: function() {
      this.city = 1;
    },
    selectshi: function() {
      this.city = 2;
    },
    getJson: function(url){
      var script = document.createElement('script');
      script.setAttribute('src', url);
      document.getElementsByTagName('head')[0].appendChild(script);
    },
    callbackFunction: function(result)
    {
       console.log('result',result)
    },
    selectqu: function() {
      this.city = 3;
    },
    selectjiedao: function() {
      this.city = 4;
    },
    shengvalue: function(id) {
      this.shengId = id;
      this.sheng = event.target.innerText;
      this.city = 2;
      this.selectCity = false;
      // 选择省调取接口
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "getRegionList",
          data: {
            region_id: id,
            region_type: "city"
          }
        })
        .then(function(response) {
          // console.log("response", response);
          if (response.errcode == 0) {
            that.shis = response.data;
          } else {
          }
        })
        .catch(function(error) {
          // console.log("error", error);
        });
    },
    shivalue: function(id) {
      this.shiId = id;
      this.shi = event.target.innerText;
      this.city = 3;
      this.selectCity = false;
      // 选择市调取接口
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "getRegionList",
          data: {
            region_id: id,
            region_type: "district"
          }
        })
        .then(function(response) {
          // console.log("response", response);
          if (response.errcode == 0) {
            that.qus = response.data;
          } else {
          }
        })
        .catch(function(error) {
          // console.log("error", error);
        });
    },
    // 调用接口获取乡镇信息
    getTownAjax: function(level,func){
      var url;
      console.log('this.shengId', this.shengId)
      console.log('this.shiId', this.shiId)
      console.log('this.quId', this.quId)
      this.$jsonp('https://lsp.wuliu.taobao.com/locationservice/addr/output_address_town.do?l1=' + this.shengId + '&l2=' + this.shiId + '&l3=' +  this.quId
      ).then(json => {
        this.jiedaos = json.result
        console.log('json', json.result)
      }).catch(err => {
        console.log(err)
      })
   
    },
    testMeth: function() {
      this.$jsonp('https://lsp.wuliu.taobao.com/locationservice/addr/output_address_town.do?l1=' + p_id1 + '&l2=' + p_id2 + '&l3=' + p_id3
      ).then(json => {
        console.log(json)
      }).catch(err => {
        console.log(err)
      })
    },
    quvalue: function(id) {
      this.quId = id;
      this.qu = event.target.innerText;
      this.city = 4;
      // 选择区调取接口
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      // that.getJson('http://api.hrchildren.com/index.php?s=/Api/Zmhf/index?key=be15d4ca913c91494cb4f9cd6ce317c6&sign='+res+'&type=getStreet&data.prov_id='+that.shengId+'&data.city_id='+that.shiId+'&data.district_id='+that.quId,'successcallback')
      // http://api.hrchildren.com/index.php?s=/Api/Zmhf/index?key=be15d4ca913c91494cb4f9cd6ce317c6&sign=b1948634871d1f7ecd02c394ac12255a&type=getStreet&data.prov_id=110000&data.city_id=undefined&data.district_id=undefinedundefined
      // http://api.hrchildren.com/index.php?s=/Api/Zmhf/index?key=be15d4ca913c91494cb4f9cd6ce317c6&sign=b1948634871d1f7ecd02c394ac12255a&type=getStreet&data.prov_id=120000&data.city_id=120100&data.district_id=120102
      this.getTownAjax()

 
      // http
      //   .post("Zmhf/index", {
      //     key: "be15d4ca913c91494cb4f9cd6ce317c6",
      //     sign: res,
      //     type: "getStreet",
      //     jsonp: "successCallback",
      //     jsonpCallback: "successCallback",
      //     data: {
      //       prov_id: this.shengId,
      //       city_id: this.shiId,
      //       district_id: this.quId
      //     }
      //   })
      //   .then(function(response) {
      //     console.log("response", response);
      //     if (response.errcode == 0) {
      //       console.log("测试测试测试");
      //       var jsonp = response.data;
      //       console.log("jsonp", jsonp);
      //       if (typeof jsonp === "string") {
      //         let reg = /^\w+\((\{[^()]+\})\)$/;
      //         let matches = datas.match(reg);
      //         if (matches) {
      //           let jsonData = JSON.parse(matches[1]);
      //         }
      //       }
      //       console.log('jsonData',jsonData);
      //     } else {
      //     }
      //   })
      //   .catch(function(error) {
      //     // console.log("error", error);
      //   });
    },
    jiedaovalue: function(e) {
      this.jiedao = e.target.innerText;
      this.model = false;
    },
    selectAddress: function() {
      this.model = true;
    },
    falseModul: function() {
      this.model = false;
    },
    closeSimpleDialog() {
      this.openSimple = false;
    },
    // 路由跳转
    LinkTo: function(link) {
      // EventBus.$emit('LinkTo', 0)
      this.$router.push({ path: link });
    }
  },
  components: { bottomBar }
};
</script>
<style lang="scss" scoped>
.add {
  width: 100%;
  height: 100vh;
  background-color: #efefef;
  .modul {
    width: 100%;
    height: 100%;
    .addressModel {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba($color: #000000, $alpha: 0.6);
      z-index: 5000;
    }
    .contant {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20rem;
      background-color: #fff;
      z-index: 6000;
      .modul-btn {
        display: inline-flex;
        align-items: flex-end;
        width: 100%;
        height: 4rem;
        background-color: #efefef;
        .btn-left {
          width: 50%;
          height: 3.5rem;
          line-height: 3.5rem;
          font-size: 1.1rem;
          color: #ccc;
          background-color: #fff;
          border-right: 1px solid #ccc;
        }
        .btn-right {
          width: 50%;
          height: 3.5rem;
          line-height: 3.5rem;
          font-size: 1.1rem;
          color: darkseagreen;
          background-color: #fff;
        }
      }
      .title {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 3rem;
        background-color: #efefef;
        .item {
          width: 25%;
          text-align: center;
          font-size: 1rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .selectList {
        width: 100%;
        height: 13rem;
        overflow: scroll;
        .list {
          width: 100%;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          font-size: 1rem;
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
  .add-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 2.8rem;
    background-color: #fff;
    .address {
      width: 100%;
      font-size: 1.1rem;
    }
    .save {
      position: absolute;
      right: 0;
      width: 20%;
      text-align: center;
      font-size: 0.9rem;
    }
  }
  .add-contant {
    margin-top: 0.5rem;
    width: 100%;
    background-color: #fff;
    .name {
      display: inline-flex;
      align-items: center;
      width: 100%;
      height: 4rem;
      border-bottom: 1px solid #ccc;
      .img {
        width: 15%;
        img {
          width: 1.5rem;
          height: 1.5rem;
        }
      }
      .names {
        font-size: 1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .input {
        width: 60%;
        height: 4rem;
        display: flex;
        align-items: center;
        input {
          padding-left: 0.5rem;
          width: 100%;
          height: 3rem;
          border: 0;
          outline: none;
          font-size: 1rem;
        }
      }
    }
    .address {
      width: 100%;
      height: 6rem;
      .select {
        padding: 0 0 0.25rem 1rem;
        display: flex;
        justify-items: center;
        align-items: flex-end;
        width: 100%;
        height: 3rem;
        font-size: 1rem;
      }
      .address-contant {
        padding: 0.25rem 0 0 1rem;
        display: inline-flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 3rem;
        .contant {
          font-size: 1rem;
        }
        .contant-input {
          input {
            border: none;
            font-size: 1rem;
            outline: none;
          }
        }
      }
    }
  }
}
</style>
